
<template>
  <div class="app-container">

    <div class="filter-container">
      <el-row :gutter="10">
        <el-col :span="6">
          <el-input
            v-model="listQuery.keyword"
            placeholder="输入角色名称搜索"
            class="input-with-select"
            @keypress.enter.native="handleFilter"
          />
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="listQuery.status"
            style="width:100%"
            placeholder="请选择状态"
            @change="handleFilter"
          >

            <el-option
              label="启用"
              value="1"
            />
            <el-option
              label="禁用"
              value="0"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-button
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="handleFilter"
          >搜索</el-button>
          <el-button
            class="filter-item"
            style="margin-left: 10px;"
            icon="el-icon-edit"
            @click="handleCreate"
          >
            添加
          </el-button>
        </el-col>

      </el-row>
    </div>
    <el-table
      ref="multipleTable"
      :v-loading="listLoading"
      :data="list"
      height="calc(100vh - 230px)"
      style="width: 100%;margin-bottom: 20px; "
      size="mini"
      border
      tooltip-effect="dark"
      :header-cell-style="{ background: '#eaf1fd', color: '#333' }"
    >

      <el-table-column
        label="编号"
        prop="role_id"
        width="80px"
      />
      <el-table-column
        label="角色名称"
        prop="name"
      />

      <el-table-column
        label="启用"
        width="80px"
      >
        <template slot-scope="{ row }">
          <el-switch v-model="row.status" :disabled="row.statusChanging" @change="statusChanged(row, $event)" />
        </template>

      </el-table-column>

      <el-table-column
        label="操作"
        align="right"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            size="mini"
            type="primary"
            @click="handleRole(row)"
          >
            分配菜单
          </el-button>
          <el-button
            type="primary"
            @click="handleUpdate(row)"
          >
            Edit
          </el-button>
          <el-popconfirm
            confirm-button-text="确认"
            cancel-button-text="取消"
            icon="el-icon-info"
            icon-color="red"
            title="确认删除?"
            @onConfirm="handleDelete(row)"
            @confirm="handleDelete(row)"
          >
            <el-button
              v-if="row.status!='deleted'"
              slot="reference"
              size="mini"
              type="danger"
              style="margin-left: 10px;"
            >
              Delete
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <UpdateRoleDialog
      v-if="updateRoleData.visible"
      :visible.sync="updateRoleData.visible"
      :status="updateRoleData.status"
      :data="updateRoleData.data"
      @reload="getList"
    />
    <RoleDialog
      v-if="roleData.visible"
      :visible.sync="roleData.visible"
      :data="roleData.data"
      @reload="getList"
    />
  </div>
</template>

<script>
import { handleList, handleDel, changeStatus } from '@/api/system/auth/role'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import UpdateRoleDialog from '@/components/Template/System/Auth/UpdateRoleDialog'
import RoleDialog from '@/components/Template/System/Auth/RoleDialog'

import _ from 'lodash'

export default {
  name: 'Role',
  components: {
    Pagination,
    UpdateRoleDialog,
    RoleDialog
  },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeFilter(type) {

    }
  },
  data() {
    return {

      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        status: '',
        keyword: ''
      },
      showReviewer: false,

      updateRoleData: {
        visible: false,
        status: '',
        data: {}
      },
      roleData: {
        visible: false,
        status: '',
        data: {}
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      handleList(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
        console.log(this.list)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleCreate() {
      this.updateRoleData.status = 'create'
      this.updateRoleData.visible = true
    },
    handleUpdate(row) {
      this.updateRoleData.status = 'update'
      this.updateRoleData.visible = true
      this.updateRoleData.data = row
    },
    handleRole(row) {
      this.roleData.visible = true
      this.roleData.data = row
    },
    handleDelete(row) {
      handleDel({
        role_id: row.role_id,
        name: row.name,
        status: row.status
      }).then(() => {
        this.$notify.success('删除成功')
        this.getList()
      })
    },

    statusChanged(row, val) {
      console.log(val)

      this.$set(row, 'statusChanging', true)
      // 状态切换
      changeStatus({
        role_id: row.role_id,
        name: row.name,
        status: val
      }).then(response => {
        this.$message({
          type: 'success',
          message: response.msg
        })
        this.$set(row, 'statusChanging', false)
      }).catch(() => {
        this.$set(row, 'statusChanging', false)
        row.status = val === 1 ? 0 : 1
      })
    },

    isEmpty: _.isEmpty

  }
}
</script>
